<template>
	<view class="document">
		<view class="document_top">
			<uv-button size="normal" disabled style="margin-right: 10px;" type="primary" text="使用选中数据"></uv-button>
			<uv-button style="margin-right: 10px;" type="primary" text="上传"></uv-button>
			<uv-button disabled style="margin-right: 10px;" type="primary" text="删除"></uv-button>
		</view>

		<view class="path">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
				<el-breadcrumb-item>活动列表</el-breadcrumb-item>
			</el-breadcrumb>
		</view>
		<uv-divider text="默认文件夹" textPosition="left"></uv-divider>
		<!-- <view class="hidden-xs-only ai_time">
				<view class="ai_time_s cursor-pointer" v-for="(item,index) in tabbar" :key="index"
					:style="tabbarChecked==index?'background-color:#eeeeee ;':''" @mouseenter="tabbarChecked = index"
					@mouseleave="tabbarChecked = -1" @click="routed(item.url)">
					<view :class="item.url?'item_box':'item_box'" :style="item.url?'':'opacity: 0.5;'">
						<uv-icon size="28" :text="item.name"
							:name="tabbarsValue==item.en? item.actIcon:item.icon"></uv-icon>{{item.name}}
					</view>
				</view>
			</view> -->
		<view style=";display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
			<uv-button v-for="(item,inde) in tabbar" :key="inde" style="margin-right: 12px;margin-bottom: 12px;"
				type="info">
				<view style="color:black;display: flex;justify-content: flex-start;align-items: center;">
					<uv-icon size="30" :name="item.icon"></uv-icon>
					<view style="margin-left: 3px;">{{item.name}}</view>
				</view>
			</uv-button>
		</view>
		<uv-divider text="自定义文件夹" textPosition="left"></uv-divider>
		<view style=";display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
			<view v-for="(ite,ind) in [...xin,...tabbar]" :key="ind" :class="index==ind?'btn btn_hover':'btn'"
				@mouseenter.stop="index = ind" @mouseleave="index = -1">
				<uv-icon size="34" :name="ite.icon"></uv-icon>
				<view style="">{{ite.name}}</view>
			</view>
			<!-- <uv-button style="" type="info">
				<view style="color:black;display: flex;justify-content: flex-start;align-items: center;">
					<uv-icon size="30" :name="item.icon"></uv-icon>
					<view style="margin-left: 3px;">{{item.name}}</view>
				</view>
			</uv-button> -->
		</view>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar.vue';
	import {
		task,
		api,
		apiId,
		getScroll,
		scroll,
		delScroll,
	} from '@/common/api.js';
	import config from '@/common/config'
	export default {
		components: {
			// 注册组件
			tabbars
		},
		model: {
			prop: 'value', // 对应 props 的属性名
			event: 'input' // 触发事件名
		},
		props: {
			value: [Object, Array, String],
			title: {
				type: String,
				default: '分享'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			size: {
				type: String,
				default: '28'
			},
		},
		data() {
			return {
				tabbar: config.tabbar,
				shareShow: false,
				shareIndex: false,
				hover: false,
				index: -1,
				xin: [{
					name: '新增文件夹',
					en: 'painting',
					icon: 'photo',
					actIcon: 'plus-circle-fill',
					url: "/pages/painting/index"
				}],
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			rgrea(e) {
				if (this.shareShow == false) {
					this.hover = true;
				}
				var that = this;
				setTimeout(function() {
					that.shareIndex = true;
				}, 500);
			},
			rgre(e) {
				this.shareIndex = false;
				if (this.shareShow) return;
				this.hover = false;
			},
			async taskd() {
				var that = this;
				this.$refs.toast.show({
					message: "发送中。。。",
					duration: '2000'
				});
				var con = {};
				api(this.aiApi + '/target', con, {
					custom: {
						auth: true,
						toast: true,
						catch: true,
					},
				}).then(e => {
					if (e.choices) {
						that.$refs.toast.show({
							message: '成功！',
							duration: '2000'
						})
						this.updateValue(e.choices[0].message.content, this.targetLanguage, this.target);
					}
				}).catch(e => {
					that.$refs.toast.show({
						type: 'error',
						message: e.msg || '失败！',
						duration: '2000'
					});
				})
			},
			updateValue(newVal, details, type) {
				this.$emit('input', newVal, details, type); // 触发事件更新父组件变量
				this.$emit('res', newVal, details, type); // 触发事件更新父组件变量
			},
			routed(url) {
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.document {
		// width: calc(100% - 20px);
		padding: 12px;
		// display: flex;
		// justify-content: space-between;
		// align-items: flex-end;

		.document_top {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
		}

		.ai_time {
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: 50%;

			.ai_time_s {
				width: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
				margin: 0px 5px;

				.item_box {
					display: flex;
					justify-content: flex-start;

					align-items: center;
					margin: 6px 10px;
					height: 100%;
				}
			}

		}

		.path {
			margin: 10px 0px;
			padding: 3px 2px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border: 1px solid #D9D9D9;
			border-radius: 1px;
			background-color: #fff;
		}

		.btn {
			width: 90px;
			padding: 3px 10px;
			margin-right: 12px;
			margin-bottom: 12px;
			border: 1px solid #eee;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;
		}

		.btn_hover {
			border: 1px solid #C6E2FF;
			background-color: #ECF5FF;
		}
	}
</style>